<template>
  <div>
    <el-row type="flex" justify="center" style="margin-top: 20px">
       <el-card class="article">
      <h2>{{this.article.title}}</h2>
      <!-- &ensp;空格的意思,会显示出来 -->
      <p>作者:&ensp;{{this.article.author}}</p>
      <div v-html="this.article.text">
      </div>
   </el-card>
    </el-row>
    <!-- <el-row type="flex" justify="center" style="margin-top: 15px">
      <el-card class="article">
        <h2>评论</h2>
      </el-card>
    </el-row> -->
  </div>
</template>

<script>
import {getName} from '@/api/user'
//import {htmlToText} from '@/utils/utils'
import {getOne} from '@/api/article'
export default {
    data () {
     return {
       article: ''
    }
    },
    created () {
      //获取id
        const id = this.$route.params.id
        //通过id获取文章
        getOne(id).then(async (res) =>{
            this.article = res.data.data
             await getName(this.article.author).then((res) =>{
            console.log(res.data.data.userName);
            this.article.author = res.data.data.userName
            }
            )
           // this.article.text = htmlToText(this.article.text)
        })
    }

}
</script>

<style lang="scss" scoped>
.article {
  width: 45%;
  height: 650px;
}
</style>